import React, { useEffect, useState } from 'react';
import axios from 'axios'
// 引入样式
import '../../../scss/lhq/supplier.scss'
// 表单
import { Button, Form, Input, Select } from 'antd';
// 日期
import { DatePicker, Space } from 'antd';
// icon
import { SearchOutlined, PlusCircleOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
// 导入表格
import Mytable from '../Package/Mytable'
// 导入供应列表请求,搜索
import { useSupplier, useSearch } from '../../../hooks/lhqHooks/index'
import Search from 'antd/es/transfer/search';
import { supplier_search, supplier_add, supplier_del } from '../../../tools/lhq/api'
// 对话框组件
import  Mymodal from '../Package/Mymodal'
// 请求
import { supplier_list } from '../../../tools/lhq/api'
import {  useNavigate } from 'react-router-dom';
// 引入骨架屏
import  Skeletons  from '../../../components/skeleton/Skeletons'

function Supplier(props) {
    var [date,setDate] = useState()
    // 供应列表
    var [supplier, setSupplier] = useSupplier()
    const shoAi = () => {
        axios.get('http://localhost:4000/supplier').then(
            res => {
                setSupplier(res.data)
            }
        )
    }

    var navigate = useNavigate()
    // 表单
    const onFinish = (values) => {
        // 发请求 搜索
        supplier_search(values.person).then((res)=>{
            setSupplier(res.data)
        })
    };
    // 日期
    const onChange = (date, dateString) => {
        setDate(dateString)
    };

    // 表格
    const columns = [
        {
            title: '序号',
            dataIndex: 'sn',
            key: 1,
            align: "center"
        },
        {
            title: '供应商编号',
            dataIndex: 'number',
            key: 2,
            align: "center"
        },
        {
            title: '供应商来源',
            dataIndex: 'source',
            key: 3,
            align: "center"
        },
        {
            title: '单位名称',
            dataIndex: 'name',
            key: 4,
            align: "center"
        },
        {
            title: '品牌',
            dataIndex: 'brand',
            key: 5,
            align: "center"
        },
        {
            title: '经营范围',
            dataIndex: 'scope',
            key: 6,
            align: "center"
        },
        {
            title: '负责引进人',
            dataIndex: 'person',
            key: 7,
            align: "center"
        },
        {
            title: '建档日期',
            dataIndex: 'date',
            key: 8,
            align: "center"
        },
        {
            title: 'Action',
            key: 9,
            render: (_, record) => (
                <>
                    <Button size='small' style={{ backgroundColor:'lightseagreen',color:'#fff' }} onClick={() => { edit(record) }}><EditOutlined /></Button>
                    <Button size='small' style={{ backgroundColor: 'coral', color: '#fff' }} onClick={() => { del(record) }}><DeleteOutlined /></Button>
                </>
            ),
        },
    ];

    // 删除
    const del = (record) => {
        supplier_del(record.id).then((res) => {
            setSupplier(res.data.list)
            shoAi()
        })
    }

    const [isModalOpen, setIsModalOpen] = useState(false);
    // 新增
    var add = (value) => {
        setIsModalOpen(true);
    }
    var onFinish1 = (values) => {
        setDate(date)
        setIsModalOpen(false);
        // 发请求 新增
        supplier_add({
            sn: supplier.length + 1, number: values.number, date: date, source: values.source,
            person: values.person, name: values.name, brand: values.brand, scope: values.scope,key:supplier.length+1
        }).then((res) => {
            setSupplier(res.data.list)
            shoAi()
        })
    }


    // 编辑
    const edit = (record) => {
        navigate('/index/supplieredit', { state: record })
    }
    // 
    var cancel = () =>{
        setIsModalOpen(false);
    }
    
    // 对话框属性方法 传递
    const data = {
        isModalOpen: isModalOpen,
        form:(
            <Form className='form' initialValues={{ remember: true }} onFinish={onFinish1} 
            labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                <Form.Item className='item' label="供应商编号" name="number">
                    <Input placeholder='请输入供应商编号' />
                </Form.Item>
                <Form.Item className='item' label="建档日期" name="date">
                    <Space direction="vertical">
                        <DatePicker onChange={onChange} />
                    </Space>
                </Form.Item>
                <Form.Item className='item' label="供应商来源" name="source">
                    <Input placeholder='请输入商品品牌' />
                </Form.Item>
                <Form.Item className='item' label="负责人" name="person">
                    <Input placeholder='请输入负责人姓名' />
                </Form.Item>
                <Form.Item className='item' label="单位名称" name="name">
                    <Input placeholder='请输入单位名称' />
                </Form.Item>
                <Form.Item className='item' label="品牌" name="brand">
                    <Select 
                        placeholder="所有"
                        style={{ width: 120 }}
                        options={[
                            { value: 'Mingnight' },
                            { value: 'Kingnight' },
                            { value: 'Lingnight' }
                        ]}
                    />
                </Form.Item>
                <Form.Item className='item' label="经营范围" name="scope">
                    <Input placeholder='请输入经营范围' />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit" style={{marginRight:"20px"}}>保存</Button>
                    <Button  onClick={cancel}>取消</Button>
                </Form.Item>
            </Form>
        ),
        title:'新增供应商',
        
    }

    var dataSource = {
        arr: supplier,
        visble: 0
    }
    return (
        <div className='supplier'>
            <div className="top">
                <Form className='form' initialValues={{ remember: true }} onFinish={onFinish}>
                    <Form.Item className='item' label="供应商编号" name="sn">
                        <Input placeholder='请输入供应商编号' />
                    </Form.Item>
                    <Form.Item className='item' label="建档日期" name="date">
                        <Space direction="vertical" >
                            <DatePicker onChange={onChange}/>
                        </Space>
                    </Form.Item>
                    <Form.Item className='item' label="供应商来源" name="source">
                        <Input placeholder='请输入商品品牌' />
                    </Form.Item>
                    <Form.Item className='item' label="负责人" name="person">
                        <Input placeholder='请输入负责人姓名' />
                    </Form.Item>
                    <Form.Item className='item' label="单位名称" name="name">
                        <Input placeholder='请输入单位名称' />
                    </Form.Item>
                    <Form.Item className='item' label="品牌" name="brand" >
                        <Select
                            placeholder="所有"
                            style={{ width: 120 }}
                            options={[
                                { value: 'Mingnight' },
                                { value: 'Kingnight' },
                                { value: 'Lingnight' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item className='item' label="经营范围" name="scope">
                        <Input placeholder='请输入经营范围' />
                    </Form.Item> 
                    <Button htmlType="submit" className='btn' type="primary" icon={<SearchOutlined />} onClick={onFinish}>搜索</Button>
                    <Button onClick={add} className='btn' style={{ backgroundColor: 'lightseagreen', color: '#fff' }} icon={< PlusCircleOutlined />}>添加</Button>
                </Form>
               
            </div>
            {/* 表格 */}
            {
                supplier && supplier.length == 0?
                <Skeletons/>:
                <Mytable dataSource={dataSource} columns={columns} />
            }
            {/* 对话框 */}
            <Mymodal data={data}></Mymodal>
        </div>
    );
}

export default Supplier;